<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/style.css" />
		<script src="../js/common.js"></script>
		<script src="../js/head_public.js"></script>
		<script src="../js/session.js"></script>
		<style>
			.diqu-div span{font-size: 14px;color: #323232;}
			.diqu-div{text-align: center;padding: 5px 0px;color:#ff7e00;}
		    .diqu-container{position: relative;}
		    .diqu-ul{position: absolute;top: 0px;left: 0px;width: 100%;padding: 5px;}
		    .diqu-ul li{margin: 5px;padding:0px 10px;color: #323232;font-size: 14px;height: 30px;line-height: 30px;border-bottom: 1px dashed #ccc;overflow: hidden;}
		    .city,.town{display: none;}
		    .diqu-ul li span:nth-of-type(2){float: right;font-size: 16px;color: #666;}
		</style>
	</head>

	<body style="background: #fff;">
		<header class="mui-bar mui-bar-nav ding-bar">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">选择地区</h1>
		</header>
		<div class="mui-content" style="background: #fff;">
	        <div class="diqu-div">
	        	<span id="province-choose"></span>--
	        	<span id="city-choose"></span>--
	        	<span id="towm-choose"></span>
	        </div>
	        <div class="diqu-container">
	        	<ul class="diqu-ul" id="sheng">
		        	
		        </ul>
	        	<ul class="diqu-ul city" id="city">
		        	
		        </ul>
	        	<ul class="diqu-ul town" id="town">
		        	
		        </ul>
	        </div>
	        
		    
		</div>
		
		<script src="../js/mui.min.js"></script>
		<script src="../js/jquery-1.8.0.min.js"></script>
		<script>
			var provinceid="";//存储省的id
			var cityid="";//存储市的id
			var townid="";//存储区的id
//			    读取地区
              	$.post(net+"/public/index.php?s=api/shop/getArea",{data:null},function(data){
	               if(data.code==200){
		               	if(data.result!=null&&data.result!=""&&data.result.length!=0){
		               		var str="";
		               		var str2="";
		               		var str3="";
		               		$.each(data.result, function(index,val) {	
		               	   	    str+="<li data-id='"+val.area_id+"'><span>"+val.area_name+"</span><span>&gt;</span></li>"
		               	    });
		               	  $("#sheng").html(str);
		               	    //点击省加载该省下的是
		               	    mui("#sheng").on("tap","li",function(){
		               	    	provinceid=$(this).attr("data-id");
		               	    	$("#province-choose").html($(this).find("span:nth-of-type(1)").html())
		               	    	//循环找到省的id
		               	    	$.each(data.result,function(index,val){
		               	    		console.log(val.area_id)
		               	    		if(val.area_id==provinceid){
		               	    			//循环得到该省的市
		               	    			$.each(val.child,function(index,val2){
		               	    				str2+="<li data-id='"+val2.area_id+"'><span>"+val2.area_name+"</span><span>&gt;</span></li>"
		               	    			})
		               	    			$("#city").html(str2);
		               	    			$("#sheng").hide();
		               	    			$("#city").show();
		               	    		}
		               	    		
		               	    	})
		               	    })
		               	    //点击省加载该省下的是
		               	    mui("#city").on("tap","li",function(){
		               	    	cityid=$(this).attr("data-id");
		               	    	$("#city-choose").html($(this).find("span:nth-of-type(1)").html())
		               	    	//循环找到省的id
		               	    	$.each(data.result,function(index,val){
		               	    		if(val.area_id==provinceid){
		               	    			//循环得到该省的市
		               	    			$.each(val.child,function(index,val2){
		               	    				//循环得到该市的id
		               	    				if(val2.area_id==cityid){
		               	    					//循环得到该市的区
		               	    					$.each(val2.three_child,function(index,val3){
				               	    				str3+="<li data-id='"+val3.area_id+"'><span>"+val3.area_name+"</span><span>&gt;</span></li>"
				               	    			})
		               	    					
		               	    				}
		               	    			})
		               	    			$("#town").html(str3);
		               	    			$("#city").hide();
		               	    			$("#town").show();
		               	    		}
		               	    		
		               	    	})
		               	    })
		               	    mui("#town").on("tap","li",function(){
		               	    	townid=$(this).attr("data-id");
		               	    	$("#towm-choose").html($(this).find("span:nth-of-type(1)").html());
		               	    	addCookie("town",$(this).find("span:nth-of-type(1)").html(),7)
		               	    	addCookie("townid",townid,7)
//		               	    	addCookie("cityid",cityid,7)
//		               	    	addCookie("provinceid",provinceid,7)
                                if(getQueryString("t")=="yang"){
                                	location.href="../yanglao/index.html?yang=y";
                                }else{
                                	location.href="../public/index.html";
                                }
		               	    	
		               	    	
		               	    })
		               	}
	               }
				   },'json'
				);

		</script>
	</body>

</html>